
<template>
<div class="container">
      <div class="container_top">
          <h2 class="container_top_text">里程碑</h2>
          <el-button type="primary" class="ge_content_right_button" icon="el-icon-plus" @click="addmilepostclick">新建里程碑</el-button>
      </div>
      <div class="container_top_heard">
          <div class="container_top_heard_left">

              <el-dropdown trigger="click" class="container_top_heard_left_dropdown" @command="handleCommand" @blur="handleCommandblur" @focus="handleCommandfocus">
                <span class="el-dropdown-link">
                  {{dropdowntitle}} <i class="iconfont icon-xia" :class="[group==true?'select-header-icon':'select-header-iconTwo']"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="待开始" class="dropdownslect" style="font-size:16px;margin-top:10px">待开始</el-dropdown-item>
                  <el-dropdown-item command="进行中" class="dropdownslect"  style="font-size:16px;">进行中</el-dropdown-item>
                  <el-dropdown-item command="已关闭" class="dropdownslect"  style="font-size:16px;">已关闭</el-dropdown-item>
                  <el-dropdown-item command="已逾期" class="dropdownslect"  style="font-size:16px;">已逾期</el-dropdown-item>
                  <el-dropdown-item command="取消选择" class="dropdownslect"  style="font-size:16px;border-top: solid 1px #cccccc;">取消选择</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
                   <!-- selectType:'multipleChoice', //singleChoice 单选 multipleChoice 多选, -->
                <selectRoleTwo title='负责人' selectType='singleChoice' ref="personselectempty" @selectsuccess="personsuccess"></selectRoleTwo>
                <div class="container_top_heard_input">
                    <el-input size="small"  placeholder="请输入里程碑关键字" prefix-icon="el-icon-search" v-model="queryInput" @keyup.enter.native="keyupenter"> </el-input>
                    <span class="container_top_heard_span" @click="empty">清空</span>
                </div>
          </div>
        <div class="container_top_heard_right">
                      <!-- <filterType></filterType> -->
            <!-- <el-dropdown trigger="click" class="container_top_heard_left_dropdown" style="width:150px">
                <span class="el-dropdown-link">
                  {{dropdownscreentitle}}
                  <span v-if="checkList.length>0">（+{{checkList.length}}）</span>
                  <i class="iconfont icon-xia" :class="[group==true?'select-header-icon':'select-header-iconTwo']"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <div class="container_top_heard_right_checkbox">
                        <el-checkbox-group v-model="checkList">
                          <el-checkbox label="1" class="el-checkbox-group" >我创建</el-checkbox>
                          <el-checkbox label="2" class="el-checkbox-group">我负责</el-checkbox>
                          <el-checkbox label="3" class="el-checkbox-group">我参与</el-checkbox>
                        </el-checkbox-group>
                        <div class="container_top_heard_right_checkbox_cencal" @click="checkboxcencel">
                            取消选择
                        </div>
                    </div>
                </el-dropdown-menu>
              </el-dropdown> -->
              <!-- <div style="width:45px">
              <el-dropdown trigger="click" @command="handleCommandTime"  style="margin-right:10px;">
                  <span class="el-dropdown-link_Time">
                    <i class="el-icon-sort app_search"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :class="[sortType=='Default'?'dropdownslectTWo':'dropdown']"  command="Default"><i v-if="sortType=='Default'" class="el-icon-check"></i>默认排序</el-dropdown-item>
                    <el-dropdown-item :class="[sortType=='CreationTime'?'dropdownslectTWo':'dropdown']"   command="CreationTime"><i v-if="sortType=='CreationTime'" class="el-icon-check"></i>创建时间</el-dropdown-item>
                    <el-dropdown-item :class="[sortType=='Updatetime'?'dropdownslectTWo':'dropdown']"   command="Updatetime"><i v-if="sortType=='Updatetime'" class="el-icon-check"></i>更新时间</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
              </div> -->
        </div>

      </div>
      <div class="container-center">
            <milepost ref="milepost" :pageshow=true @editmilepost='editmilepost'></milepost>
      </div>
</div>
</template>
<script>

import selectRoleTwo from '@/components/screen/selectRoleTwo'
import milepost from'@/components/projectComponents/milepost'
import filterType from'@/components/projectComponents/filterType'
import utils from '@/utils/utils'

 export default({
     components: {
       selectRoleTwo ,milepost,filterType
     },
     data () {
         return {
             dropdowntitle:"状态",
             dropdownscreentitle:"快捷筛选",
             group:true,
             checkList:[],
             queryInput:"",
             sortType:"Default",
             current:1,
             size:20,
             total:0,
         }
     },

     mounted() {
    let that = this;
    //点击页面空白处隐藏下拉列表
    document.addEventListener("click", function() {
      that.isShow = false;
    });
  },
     methods: {
       keyupenter(e){
       var keyCode = window.event? e.keyCode:e.which;
       if(keyCode == 13){
          this.$refs.milepost.nameclick(e.target.value)
      }},
       empty(){
        this.$refs.personselectempty.emptyclick()
        this.queryInput=""
        this.dropdowntitle="状态"
        this.$refs.milepost.empty()

       },
       personsuccess(data){
         if(data.length>0){ this.$refs.milepost.filter(data[0].userId)}
         else{ this.$refs.milepost.filter("")}
       
       },
       editmilepost(){
          this.$router.push({ path: '/project/milepostedit',})
       },
       addmilepostclick(){
         this.$router.push({ path: '/milepost/milepostAdd ',query:{id:this.$route.query.id}})

       },
         handleCommandTime(item){
            this.sortType=item
         },
         checkboxcencel(){
             this.checkList=[]
         },

         handleCommandblur(){
              this.group=true
         },
         handleCommandfocus(){
             console.log('1');
             this.group=false
         },
         handleCommand(data){
            this.group=false
             if(data=='取消选择'){
                 this.dropdowntitle="状态"
                   this.$refs.milepost.ststuslist('')
             }else{
                this.dropdowntitle=data
                let status=""
                if(data=='待开始'){status='00'}
                else if(data=='进行中'){status='01'}
                else if(data=='已关闭'){status='02'}
                else if(data=='已预期'){status='03'}
                this.$refs.milepost.ststuslist(status)
             }


         }
     }
 })
</script>
 <style scoped>
 .container_top{
     display: flex;
     justify-content: space-between;
 }
 .container_top_text{
     margin: 0;
 }
 .ge_content_right_button{
     color: #ffffff;
 }
.container_top_heard{
    margin-top: 8px;
    width: 100%;
    height: 40px;
    background-color:rgb(245, 246, 248);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 8px;
    justify-content: space-between;
}
.container_top_heard_left{
 display: flex;
 align-items: center;
}
.container_top_heard_left_dropdown{
    width: 88px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}
.el-dropdown-link{
  /* border: 1px solid blanchedalmond; */
  /* width: 88px; */
  font-size: 14px;
  font-weight: 700;
  color: rgb(46, 64, 94);

}
.el-dropdown-link:focus{
  /* width: 93px;   */
  display: block;
  box-sizing: border-box;
 font-size: 14px;
  font-weight: 700;
  color: rgb(46, 64, 94);
  padding: 8px;
  border-radius: 10px;
  border: 3px solid #167EF8;
}
.el-dropdown-link_Time{
  height: 35px;
  font-size: 14px;
  font-weight: 700;
  color: rgb(46, 64, 94);
  padding:8px

}
.el-dropdown-link_Time:focus{
    height: 38px;
  display: block;
    padding:8px;
  box-sizing: border-box;
  font-size: 14px;
  color: rgb(46, 64, 94);
  border-radius: 10px;
  border: 3px solid #167EF8;
}
.dropdownslect{
     cursor: pointer;
      display: block;
      height: auto;
      text-align: left;
      border: none;
      color: #2e405e;
      padding: .71428571rem 1.14285714rem!important;
      font-size: 14px;
      text-transform: none;
      font-weight: 400;
      box-shadow: none;
      line-height: 24px;
      /* background-color: #e8f4ff; */
      /* color: #46a6ff; */
}
.dropdownslectTWo{
     cursor: pointer;
      display: block;
      height: auto;
      text-align: left;
      border: none;
      color: #2e405e;
      padding: .71428571rem 1.14285714rem!important;
      font-size: 14px;
      text-transform: none;
      font-weight: 400;
      box-shadow: none;
      line-height: 24px;
      background-color: #e8f4ff;
       color: #46a6ff;
}
.dropdown{
     cursor: pointer;
      display: block;
      height: auto;
      text-align: left;
      border: none;
      color: #2e405e;
      padding: .71428571rem 1.14285714rem!important;
      font-size: 14px;
      text-transform: none;
      font-weight: 400;
      box-shadow: none;
      line-height: 24px;
}
.select-header-icon{
  font-size: 12px;
  color: #333333;
  margin-right: 4px;
  transition: all .5s;
  transform: rotate(-180deg);
}

.select-header-iconTwo{
  font-size: 12px;
  color: #333333;
  margin-right: 4px;
  transition: all .5s;
}
.container_top_heard_input{
    margin-left: 8px;
    display: flex;
    align-items: center;
}
.container_top_heard_span{
    width: 50px;
    font-size: 14px;
    color: rgb(144, 154, 170);
    margin-left: 10px;
    /* line-height: 20px; */
    cursor: pointer;
}
.container_top_heard_right{
    display: flex;
    align-items: center;

}
.container_top_heard_right_checkbox{
    padding:10px
}
.el-checkbox-group .el-checkbox{
    display: block;
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-top: 5px;
}
.container_top_heard_right_checkbox_cencal{
    font-size: 14px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: solid 1px #cccccc;
    cursor: pointer;
    color: rgb(46, 64, 94);
}

.app_item_seting{
    padding-top: 5px;
}
.app_item_statssrtting{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.app_item_seting{
display:flex;
align-items: flex-start;
margin-bottom: 8px;
margin-left: 10px;
}

</style>
